<template>
  <div>
    <div id="gg" ref="a" />
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  TooltipComponent,
  VisualMapComponent,
  LegendComponent
} from 'echarts/components'
import {
  RadarChart
} from 'echarts/charts'
import {
  CanvasRenderer
} from 'echarts/renderers'

echarts.use(
  [TitleComponent, TooltipComponent, VisualMapComponent, LegendComponent, RadarChart, CanvasRenderer]
)
export default {
  data() {
    return {
      ech: ''
    }
  },
  mounted() {
    this.ech = echarts.init(this.$refs.a)
    this.ech.setOption({
      color: ['#5470c6',
        '#91cc75',
        '#fac858',
        '#ee6666',
        '#73c0de',
        '#3ba272',
        '#fc8452',
        '#9a60b4',
        '#ea7ccc'],
      title: {
        text: '浏览器占比变化',
        subtext: '纯属虚构',
        top: 10,
        left: 10
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        type: 'scroll',
        bottom: 10,
        data: (function() {
          var list = []
          for (var i = 1; i <= 28; i++) {
            list.push(i + 2000 + '')
          }
          return list
        })()
      },
      visualMap: {
        top: 'middle',
        right: 10,
        color: ['red', 'yellow'],
        calculable: true
      },
      radar: {
        indicator: [
          { text: 'IE8-', max: 400 },
          { text: 'IE9+', max: 400 },
          { text: 'Safari', max: 400 },
          { text: 'Firefox', max: 400 },
          { text: 'Chrome', max: 400 }
        ]
      },
      series: (function() {
        var series = []
        for (var i = 1; i <= 28; i++) {
          series.push({
            name: '浏览器（数据纯属虚构）',
            type: 'radar',
            symbol: 'none',
            lineStyle: {
              width: 1
            },
            emphasis: {
              areaStyle: {
                color: 'rgba(0,250,0,0.3)'
              }
            },
            data: [{
              value: [
                (40 - i) * 10,
                (38 - i) * 4 + 60,
                i * 5 + 10,
                i * 9,
                i * i / 2
              ],
              name: i + 2000 + ''
            }]
          })
        }
        return series
      })()
    })
  }
}
</script>
<style lang="scss">
#gg{
    height: 280px;
    width: 500px;
}
</style>
